<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body>div {
      width: 1200px;
      margin: 0 auto;
      background-color: skyblue;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      font-size: 60px;
    }

    ul,
    li {
      list-style: none;
    }

    ul {
      width: 1200px;
      margin: 10px auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    li {
      width: 295px;
      border: 1px solid #333;
      height: 510px;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding: 8px;
    }

    img {
      width: 280px;
      height: 350px;
      display: block;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
    }

    .pagination {
      border: 1px solid #333;
      margin: 10px auto;
      height: 80px;
      background-color: #fff;
      color: #333;
      justify-content: flex-start;
      padding-left: 20px;
      box-sizing: border-box;
    }

    .pagination>.prev,
    .pagination>.next {
      padding: 3px 10px;
      background-color: skyblue;
      cursor: pointer;
      height: 40px;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .pagination>span.disable {
      background-color: #ccc;
      cursor: not-allowed;
    }

    .pagination>.total {
      padding: 0 10px;
      font-size: 20px;
    }

    select {
      padding: 5px 10px 5px 20px;
      font-size: 18px;
      margin-left: 20px;
    }
  </style>
</head>

<body>

  <div class="header">网页头部</div>
  <div class="pagination">
    <span class="prev disable">&lt;</span>
    <span class="total">1 / 100</span>
    <span class="next">&gt;</span>
    <select>
      <option value="4">4</option>
    </select>
  </div>
  <ul>
    <li>
      <img src="" alt="">
      <div class="info">
        <p>名称</p>
        <p>城市: 城市</p>
        <p>地址: 地址</p>
        <p>价格: 价格</p>
        <p>演出时间: 时间</p>
      </div>
    </li>
  </ul>
  <div class="footer">网页底部</div>
  <script src="./data.js"></script>
  <script>
    /*
      分页渲染        
          + 默认显示第 1 页
          + 默认一页 4 条
          + 点击下一页/上一页按钮
          + 切换一页显示多少条
    */
    // 获取要操作的元素
    // select 标签
    var selectBox = document.querySelector('select');
    // ul 标签
    var listBox = document.querySelector('ul');
    // prev 标签 上一页
    var prevBtn = document.querySelector('.prev');
    // next 标签 下一页
    var nextBtn = document.querySelector('.next');
    // total 标签 页码
    var totalBox = document.querySelector('.total');

    // 准备变量
    // select 标签的数据 （一页显示条数可选）
    var pageList = [4, 8, 12, 16, 20];
    // 当前页码 第几页
    var current = 1;
    // 一页默认显示数据条数
    var pageSize = 4;
    // 一共有多少页，初始值为0，需要重新计算后赋值
    var total = 0;

    // 1. 根据 pageList 渲染 select 标签内的 option
    selectBox.innerHTML = pageList.reduce(function (prev, item) {
      return prev + `
        <option value="${item}">${item}</option>
      `
    }, '');

    // 2. 准备函数专门用于渲染页面 
    function bindHtml() {
      // 根据current(当前页码) 和 pageSize(一页显示多少条数据) 截取list数组中的数据
      var bindList = list.slice((current - 1) * pageSize, current * pageSize);
      // 根据bindList 组装页面并渲染
      listBox.innerHTML = bindList.reduce(function (prev, item) {
        return prev + `
          <li>
            <img src="${item.pic}" alt="">
            <div class="info">
              <p>${item.name}</p>
              <p>城市: ${item.city}</p>
              <p>地址: ${item.address}</p>
              <p>价格: ${item.price}</p>
              <p>演出时间: ${item.showTime}</p>
            </div>
          </li>
        `
      }, '');
      // 根据当前页码，判断上一页按钮是否有 disable 类名
      prevBtn.className = current === 1 ? 'prev disable' : 'prev';
      // 根据当前页码，判断下一页按钮是否有 disable 类名
      nextBtn.className = current === total ? 'next disable' : 'next';
      // 计算一共有多少页
      total = Math.ceil(list.length / pageSize);
      // 根据总页数和当前页码，显示total标签内容
      totalBox.innerHTML = `${current} / ${total}`;
    }

    // 3. 打开页面，执行一遍渲染页面函数
    bindHtml();

    // 4. 点击上一页按钮
    prevBtn.addEventListener('click', () => {
      if (current <= 1) return; // 判断不执行后面的代码
      current--;
      bindHtml(); // 重新渲染页面
    });

    // 5. 点击下一页按钮
    nextBtn.addEventListener('click', () => {
      if (current >= total) return;
      current++;
      bindHtml();
    });

    // 6. 切换select，使用change事件
    selectBox.addEventListener('change', () => {
      // 修改每页显示数据条数之前，让当前页码current回归到第一页
      current = 1;
      // 修改pageSize（每页显示条数）
      pageSize = selectBox.value; // 注意：数组的元素是字符串类型，进行非加法运算时会自动转换成Number
      // 重新渲染页面
      bindHtml();
    });
  </script>
</body>

</html>
<!-- 
  var arr = ['a','b','c','d','e','f']
  每页显示条数2               开始索引     结束索引
  第一页  arr.slice(0,2)      (1-1)*2      1*2
  第二页  arr.slice(2,4)      (2-1)*2      2*2
  第三页  arr.slice(4,6)      (3-1)*2      3*2

  第n页   arr.slice((n-1)*2,n*2)
 -->